<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta charset="utf-8">
    <title>确权登记系统</title>
    <!-- jq -->
    <script src="${ctx}/js/jquery-3.1.1.min.js"></script>
    <script src="${ctx}/js/echarts.js"></script>
    <script src="http://echarts.baidu.com/asset/map/js/china.js"></script>

    <!-- bootstrap -->
    <link href="${ctx}/css/bootstrap.min.css" rel="stylesheet">
    <script src="${ctx}/js/bootstrap.min.js"></script>

    <!-- 分页插件 -->
    <link href="${ctx}/css/bootstrap-table.min.css" rel="stylesheet">
    <script src="${ctx}/js/bootstrap-table.js"></script>
    <script src="${ctx}/js/bootstrap-table-locale-all.min.js"></script>

    <!--layer -->
    <link href="${ctx}/js/layer/theme/default/layer.css" rel="stylesheet">
    <style type="text/css">
        .panel {
            margin-left: -48px;
            width: 1145px;
        }

        .col-sm-12 {
            margin-left: -60px;
        }
        #main1{
            width: 100%;
            height: 500px;
        }
        thead {
            background: #428bca;
            color: white;
        }
    </style>
</head>
<body>
<div id="main1" style="margin-top:5px"></div>
  <script type="text/javascript">

          // 基于准备好的dom，初始化echarts实例
         /* var myChart3 = echarts.init(document.getElementById('main1'));*/
          var jiangxi = "/asset/get/s/data-1518338017111-rJK1gtpUM.json";
          var yingtan = "/asset/get/s/data-1518338860057-By447tpLf.json";
          var yichun = "/asset/get/s/data-1518338852969-Hy677KTIf.json";
          var xinyu = "/asset/get/s/data-1518338838010-SyAzQYTIf.json";
          var shangrao = "/asset/get/s/data-1518338829670-H1UfQYa8G.json";
          var pingxiang = "/asset/get/s/data-1518338823093-HkyMQtpUf.json";
          var nanchang = "/asset/get/s/data-1518338805373-S1Temta8G.json";
          var jiujiang = "/asset/get/s/data-1518338799987-S1deQFTLz.json";
          var jingdezhen = "/asset/get/s/data-1518338783915-HJOJXtaLf.json";
          var jian = "/asset/get/s/data-1518338772507-BJnAMKTIz.json";
          var ganzhou = "/asset/get/s/data-1518338763250-S17RfKpLM.json";
          var fuzhou = "/asset/get/s/data-1518338684239-S1EFGtp8f.json";

          echarts.extendsMap = function(id, opt){
              // 实例
              var chart = this.init(document.getElementById('main1'));

              var curGeoJson = {};
              var cityMap = {
                  "南昌市": nanchang,
                  "景德镇市": jingdezhen,
                  "萍乡市": pingxiang,
                  "九江市": jiujiang,
                  "新余市": xinyu,
                  "鹰潭市": yingtan,
                  "赣州市": ganzhou,
                  "吉安市": jian,
                  "宜春市": yichun,
                  "抚州市": fuzhou,
                  "上饶市": shangrao
              };
              var geoCoordMap = {
                  '南昌': [115.89, 28.48],
                  '景德镇': [117.28, 29.09],
                  '萍乡': [113.93, 27.41],
                  '九江': [115.97,29.51],
                  '新余': [114.81, 27.72],
                  '鹰潭': [117.12, 28.10],
                  '赣州': [115.04, 25.67],
                  '吉安': [115.05, 26.88],
                  '宜春': [114.41, 28.03],
                  '抚州': [116.45, 27.79],
                  '上饶': [117.92, 28.22]
              };
              var levelColorMap = {
                  '1': 'rgba(241, 109, 115, .8)',
                  '2': 'rgba(255, 235, 59, .7)',
                  '3': 'rgba(147, 235, 248, 1)'
              };

              var defaultOpt = {
                  mapName: 'china',     // 地图展示
                  goDown: false,        // 是否下钻
                  bgColor: '#404a59',   // 画布背景色
                  activeArea: [],       // 区域高亮,同echarts配置项
                  data: [],
                  // 下钻回调(点击的地图名、实例对象option、实例对象)
                  callback: function(name, option, instance){}
              };
              if(opt) opt = this.util.extend(defaultOpt, opt);

              // 层级索引
              var name = [opt.mapName];
              var idx = 0;
              var pos = {
                  leftPlus: 115,
                  leftCur: 150,
                  left: 198,
                  top: 50
              };

              var line = [[0, 0], [8, 11], [0, 22]];
              // style
              var style = {
                  font: '18px "Microsoft YaHei", sans-serif',
                  textColor: '#eee',
                  lineColor: 'rgba(147, 235, 248, .8)'
              };

              var handleEvents = {
                  /**
                   * i 实例对象
                   * o option
                   * n 地图名
                   **/
                  resetOption: function(i, o, n){
                      var breadcrumb = this.createBreadcrumb(n);

                      var j = name.indexOf(n);
                      var l = o.graphic.length;
                      if(j < 0){
                          o.graphic.push(breadcrumb);
                          o.graphic[0].children[0].shape.x2 = 145;
                          o.graphic[0].children[1].shape.x2 = 145;
                          if(o.graphic.length > 2){
                              for(var x = 0; x < opt.data.length; x++){
                                  if(n === opt.data[x].name + '市'){
                                      o.series[0].data = handleEvents.initSeriesData([opt.data[x]]);
                                      break;
                                  }else o.series[0].data = [];
                              }
                          };
                          name.push(n);
                          idx++;
                      }else{
                          o.graphic.splice(j + 2, l);
                          if(o.graphic.length <= 2){
                              o.graphic[0].children[0].shape.x2 = 60;
                              o.graphic[0].children[1].shape.x2 = 60;
                              o.series[0].data = handleEvents.initSeriesData(opt.data);
                          };
                          name.splice(j + 1, l);
                          idx = j;
                          pos.leftCur -= pos.leftPlus * (l - j - 1);
                      };

                      o.geo.map = n;
                      o.geo.zoom = 0.4;
                      i.clear();
                      i.setOption(o);
                      this.zoomAnimation();
                      opt.callback(n, o, i);
                  },

                  /**
                   * name 地图名
                   **/
                  createBreadcrumb: function(name){
                      var cityToPinyin = {
                          "南昌市": "nanchang",
                          "景德镇市": "jingdezhen",
                          "萍乡市": "pingxiang",
                          "九江市": "jiujiang",
                          "新余市": "xinyu",
                          "鹰潭市": "yingtan",
                          "赣州市": "ganzhou",
                          "吉安市": "jian",
                          "宜春市": "yichun",
                          "抚州市": "fuzhou",
                          "上饶市": "shangrao"
                      };
                      var breadcrumb = {
                          type: 'group',
                          id: name,
                          left: pos.leftCur + pos.leftPlus,
                          top: pos.top + 3,
                          children: [{
                              type: 'polyline',
                              left: -90,
                              top: -5,
                              shape: {
                                  points: line
                              },
                              style: {
                                  stroke: '#fff',
                                  key: name
                                  // lineWidth: 2,
                              },
                              onclick: function(){
                                  var name = this.style.key;
                                  handleEvents.resetOption(chart, option, name);
                              }
                          }, {
                              type: 'text',
                              left: -68,
                              top: 'middle',
                              style: {
                                  text: name,
                                  textAlign: 'center',
                                  fill: style.textColor,
                                  font: style.font
                              },
                              onclick: function(){
                                  var name = this.style.text;
                                  handleEvents.resetOption(chart, option, name);
                              }
                          }, {
                              type: 'text',
                              left: -68,
                              top: 10,
                              style: {

                                  name: name,
                                  text: cityToPinyin[name] ? cityToPinyin[name].toUpperCase() : '',
                                  textAlign: 'center',
                                  fill: style.textColor,
                                  font: '12px "Microsoft YaHei", sans-serif',
                              },
                              onclick: function(){
                                  // console.log(this.style);
                                  var name = this.style.name;
                                  handleEvents.resetOption(chart, option, name);
                              }
                          }]
                      }

                      pos.leftCur += pos.leftPlus;

                      return breadcrumb;
                  },

                  // 设置effectscatter
                  initSeriesData: function(data){
                      var temp = [];
                      for(var i = 0;i < data.length;i++){
                          var geoCoord = geoCoordMap[data[i].name];
                          if(geoCoord){
                              temp.push({
                                  name: data[i].name,
                                  value: geoCoord.concat(data[i].value, data[i].level)
                              });
                          }
                      };
                      return temp;
                  },

                  zoomAnimation: function(){
                      var count = null;
                      var zoom = function(per){
                          if(!count) count = per;
                          count = count + per;
                          // console.log(per,count);
                          chart.setOption({
                              geo: {
                                  zoom: count
                              }
                          });
                          if(count < 1) window.requestAnimationFrame(function(){
                              zoom(0.2);
                          });
                      };
                      window.requestAnimationFrame(function(){
                          zoom(0.2);
                      });
                  }
              };

              var option = {
                  backgroundColor: opt.bgColor,
                  graphic: [{
                      type: 'group',
                      left: pos.left,
                      top: pos.top - 4,
                      children: [{
                          type: 'line',
                          left: 0,
                          top: -20,
                          shape: {
                              x1: 0,
                              y1: 0,
                              x2: 60,
                              y2: 0
                          },
                          style: {
                              stroke: style.lineColor,
                          }
                      }, {
                          type: 'line',
                          left: 0,
                          top: 20,
                          shape: {
                              x1: 0,
                              y1: 0,
                              x2: 60,
                              y2: 0
                          },
                          style: {
                              stroke: style.lineColor,
                          }
                      }]
                  }, {
                      id: name[idx],
                      type: 'group',
                      left: pos.left + 2,
                      top: pos.top,
                      children: [{
                          type: 'polyline',
                          left: 90,
                          top: -12,
                          shape: {
                              points: line
                          },
                          style: {
                              stroke: 'transparent',
                              key: name[0]
                          },
                          onclick: function(){
                              var name = this.style.key;
                              handleEvents.resetOption(chart, option, name);
                          }
                      }, {
                          type: 'text',
                          left: 0,
                          top: 'middle',
                          style: {
                              text: name[0] === '江西' ? '江西省' : name[0],
                              textAlign: 'center',
                              fill: style.textColor,
                              font: style.font
                          },
                          onclick: function(){
                              handleEvents.resetOption(chart, option, '江西');
                          }
                      }, {
                          type: 'text',
                          left: 0,
                          top: 10,
                          style: {
                              text: 'JIANGXI',
                              textAlign: 'center',
                              fill: style.textColor,
                              font: '12px "Microsoft YaHei", sans-serif',
                          },
                          onclick: function(){
                              handleEvents.resetOption(chart, option, '江西');
                          }
                      }]
                  }],
                  geo: {
                      map: opt.mapName,
                      // roam: true,
                      zoom: 1,
                      label: {
                          normal: {
                              show: true,
                              textStyle: {
                                  color: '#fff'
                              }
                          },
                          emphasis: {
                              textStyle: {
                                  color: '#fff'
                              }
                          }
                      },
                      itemStyle: {
                          normal: {
                              borderColor: 'rgba(147, 235, 248, 1)',
                              borderWidth: 1,
                              areaColor: {
                                  type: 'radial',
                                  x: 0.5,
                                  y: 0.5,
                                  r: 0.8,
                                  colorStops: [{
                                      offset: 0,
                                      color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                  }, {
                                      offset: 1,
                                      color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                                  }],
                                  globalCoord: false // 缺省为 false
                              },
                              shadowColor: 'rgba(128, 217, 248, 1)',
                              // shadowColor: 'rgba(255, 255, 255, 1)',
                              shadowOffsetX: -2,
                              shadowOffsetY: 2,
                              shadowBlur: 10
                          },
                          emphasis: {
                              areaColor: '#389BB7',
                              borderWidth: 0
                          }
                      },
                      regions: opt.activeArea.map(function(item){
                          if(typeof item !== 'string'){
                              return {
                                  name: item.name,
                                  itemStyle: {
                                      normal: {
                                          areaColor: item.areaColor || '#389BB7'
                                      }
                                  },
                                  label: {
                                      normal: {
                                          show: item.showLabel,
                                          textStyle: {
                                              color: '#fff'
                                          }
                                      }
                                  }
                              }
                          }else{
                              return {
                                  name: item,
                                  itemStyle: {
                                      normal: {
                                          borderColor: '#91e6ff',
                                          areaColor: '#389BB7'
                                      }
                                  }
                              }
                          }
                      })
                  },
                  series: [{
                      type: 'effectScatter',
                      coordinateSystem: 'geo',
                      // symbol: 'diamond',
                      showEffectOn: 'render',
                      rippleEffect: {
                          period: 15,
                          scale: 6,
                          brushType: 'fill'
                      },
                      hoverAnimation: true,
                      itemStyle: {
                          normal: {
                              color: function(params){
                                  return levelColorMap[params.value[3]];
                              },
                              shadowBlur: 10,
                              shadowColor: '#333'
                          }
                      },
                      data: handleEvents.initSeriesData(opt.data)
                  }]
              };

              chart.setOption(option);
              // 添加事件
              chart.on('click', function(params){
                  var _self = this;
                  if(opt.goDown && params.name !== name[idx]){
                      if(cityMap[params.name]){
                          var url = cityMap[params.name];
                          $.get(url, function(response){
                              // console.log(response);
                              curGeoJson = response;
                              echarts.registerMap(params.name, response);
                              handleEvents.resetOption(_self, option, params.name);
                          });
                      }
                  }
              });

              chart.setMap = function(mapName){
                  var _self = this;
                  if(mapName.indexOf('市') < 0) mapName = mapName + '市';
                  var citySource = cityMap[mapName];
                  if(citySource){
                      var url = './map/' + citySource + '.json';
                      $.get(url, function(response){
                          // console.log(response);
                          curGeoJson = response;
                          echarts.registerMap(mapName, response);
                          handleEvents.resetOption(_self, option, mapName);
                      });
                  }
                  // handleEvents.resetOption(this, option, mapName);
              };

              return chart;
          };

          $.getJSON(jiangxi, function(geoJson){
              echarts.registerMap('江西', geoJson);
              var myChart = echarts.extendsMap('chart-panel', {
                  bgColor: '#154e90', // 画布背景色
                  mapName: '江西',    // 地图名
                  goDown: true,       // 是否下钻
                  // 下钻回调
                  callback: function(name, option, instance){
                      console.log(name, option, instance);
                  },
                  // 数据展示
                  data: [{
                      name: '南昌',
                      value: 10,
                      level: 1
                  }, {
                      name: '景德镇',
                      value: 12,
                      level: 2
                  }, {
                      name: '萍乡',
                      value: 11,
                      level: 3
                  }, {
                      name: '赣州',
                      value: 16,
                      level: 2
                  }, {
                      name: '吉安',
                      value: 12,
                      level: 1
                  }]
              });
          })


          chart.setOption(option);

  </script>
 </body>
</html>